<template>
    <div>
        <el-card style="overflow: auto">
            <el-tabs v-model="activeName">
                <el-tab-pane label="基本信息" name="basic">
                    <table-basic ref="basicInfo" :form-data="tableFormData" />
                </el-tab-pane>
                <el-tab-pane label="字段信息" name="columnInfo">
                    <table-column ref="columnInfo" :column-data="columnData" />
                </el-tab-pane>
                <el-tab-pane label="查询配置" name="formInfo">
                    <form-config ref="formInfo" :form-data="formConfigData" />
                </el-tab-pane>
                <el-tab-pane label="分页配置" name="pageInfo">
                    <page ref="pageInfo" :form-data="pageFormData" />
                </el-tab-pane>
                <el-tab-pane label="代理配置" name="proxyInfo">
                    <proxy-config ref="proxyInfo" :form-data="proxyFormData" />
                </el-tab-pane>
                <el-tab-pane label="编辑项配置" name="editInfo">
                    <edit-config ref="editInfo" :form-data="editFormData" />
                </el-tab-pane>
                <el-tab-pane label="校验规则配置" name="editRulesInfo">
                    <edit-rules ref="editRulesInfo" :rule-data="editRulesData" />
                </el-tab-pane>
                <el-tab-pane label="工具栏配置" name="toolbarInfo">
                    <toolbar-config ref="toolbarInfo" :toolbar-data="toolbarData" />
                </el-tab-pane>
            </el-tabs>
            <el-form label-width="100px">
                <div style="text-align: center; margin-left: -100px; margin-top: 10px">
                    <el-button type="primary" @click="submitForm()">提交</el-button>
                    <el-button @click="close()">返回</el-button>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script setup name="GenEdit" lang="ts">
    import { getCurrentInstance, ref } from "vue";
    import { useRoute } from "vue-router";
    import { getTableConfig, saveTableConfig } from "@/api/system/roleTable/table";
    import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
    import tableBasic from "./components/tableBasic.vue";
    import tableColumn from "./components/tableColumn.vue";
    import formConfig from "./components/formConfig";
    import page from "./components/page";
    import proxyConfig from "./components/proxyConfig";
    import editConfig from "./components/editConfig";
    import editRules from "./components/editRules";
    import EditorPopupModal from "@/components/EditorPopupModal/index.vue";
    import toolbarConfig from "./components/toolbarConfig";
    import { JSONParse } from "@/utils/common";
    import XEUtils from "xe-utils";
    import { tableFormDataDefault, formConfigDataDefault, pageFormDataDefault, editFormDataDefault, proxyDataDefault, toolbarDataDefault } from "./components/propsDefault";
    import { isArray, isString } from "../../../utils/is";
    const route = useRoute();
    const { proxy } = getCurrentInstance() as any;
    const menuId = ref(route.query.menuId);
    const tableId = ref(route.params.tableId);
    const activeName = ref("basic");
    const tableHeight = ref(document.documentElement.scrollHeight - 245 + "px");

    const basicInfo = ref();
    const columnInfo = ref();
    const pageInfo = ref();
    const proxyInfo = ref();
    const editRulesInfo = ref();
    const formInfo = ref();
    const toolbarInfo = ref();

    const columnData = ref();
    const editRulesData = ref();

    const tableFormData = ref();
    const formConfigData = ref();
    const pageFormData = ref();
    const editFormData = ref();
    const proxyFormData = ref();
    const toolbarData = ref();

    async function getMenuTable() {
        const tableData = await getTableConfig(tableId.value);
        console.log("1111111111111111", tableData.data);
        const formatData = JSONParse(JSON.stringify(tableData.data));

        tableFormData.value = formatData.table ? formatData.table : tableFormDataDefault;
        if (tableFormData.value.handConfig && typeof tableFormData.value.handConfig == "object") {
            const handConfig = ref([]);
            for (let key in tableFormData.value.handConfig) {
                if (tableFormData.value.handConfig[key]) {
                    handConfig.value.push(key);
                }
            }
            tableFormData.value.handConfig = handConfig.value;
        } else {
            tableFormData.value.handConfig = null;
        }
        // 表格列字典处理
        const columns = ref([]);
        if (formatData.columns) {
            XEUtils.arrayEach(formatData.columns, (item: any) => {
                if (item["dictType"]) {
                    item["dictType"] = JSON.parse(item["dictType"]);
                    if (!isArray(item["dictType"]) && isString(item["dictType"])) {
                        item["dictType"] = item["dictType"].split(",");
                    }
                }
                columns.value.push(item);
            });
        }
        // 查询配置字典配置
        const items = ref([]);
        if (formatData.formItem) {
            XEUtils.arrayEach(formatData.formItem, (item: any) => {
                if (item["dictType"]) {
                    item["dictType"] = JSON.parse(item["dictType"]);
                    if (!isArray(item["dictType"]) && isString(item["dictType"])) {
                        item["dictType"] = item["dictType"].split(",");
                    }
                }
                items.value.push(item);
            });
        }
        const proxy = ref({});
        if (formatData.proxy) {
            proxy.value = formatData.proxy;
            if (!formatData.proxy.query) {
                proxy.value.query = {
                    api: "",
                    beforeQuery: "",
                    afterQuery: "",
                    method: "",
                };
            }
            if (!formatData.proxy.queryAll) {
                proxy.value.queryAll = {
                    api: "",
                    beforeQueryAll: "",
                    afterQueryAll: "",
                    method: "",
                };
            }
            if (!formatData.proxy.delete) {
                proxy.value.delete = {
                    api: "",
                    beforeDelete: "",
                    afterDelete: "",
                    method: "",
                };
            }
            if (!formatData.proxy.insert) {
                proxy.value.insert = {
                    api: "",
                    beforeInsert: "",
                    afterInsert: "",
                    method: "",
                };
            }
            if (!formatData.proxy.update) {
                proxy.value.update = {
                    api: "",
                    beforeUpdate: "",
                    afterUpdate: "",
                    method: "",
                };
            }
            if (!formatData.proxy.save) {
                proxy.value.save = {
                    afterSave: "",
                };
            }
        }

        console.log("表格数据", formatData);

        // columnData.value = columns.value.length > 0 ? columns.value : [];
        // formConfigData.value = formatData.form ? formatData.form : formConfigDataDefault;
        // formConfigData.value["items"] = items.value.length > 0 ? items.value : [];
        // editFormData.value = formatData.editConfig ? formatData.editConfig : editFormDataDefault;
        // editRulesData.value = formatData.editRile ? formatData.editRile : [];
        // pageFormData.value = formatData.pager ? formatData.pager : pageFormDataDefault;
        // proxyData.value = proxy.value && JSON.stringify(proxy.value) != "{}" ? proxy.value : proxyDataDefault;
        // toolbarData.value = formatData.toolbar ? formatData.toolbar : toolbarDataDefault;

        tableFormData.value = formatData.table ? formatData.table : tableFormDataDefault;
        columnData.value = formatData.columns ? formatData.columns : [];
        formConfigData.value = formatData.form ? formatData.form : formConfigDataDefault;
        formConfigData.value["items"] = formatData.formItem ? formatData.formItem : [];
        editFormData.value = formatData.editConfig ? formatData.editConfig : editFormDataDefault;
        editRulesData.value = formatData.editRile ? formatData.editRile : {};
        pageFormData.value = formatData.pager ? formatData.pager : pageFormDataDefault;
        proxyFormData.value = proxy.value && JSON.stringify(proxy.value) != "{}" ? proxy.value : proxyDataDefault;
        toolbarData.value = formatData.toolbar ? formatData.toolbar : toolbarDataDefault;
        console.log("proxyFormData.value", proxyFormData.value);
    }
    getMenuTable();

    /** 提交按钮 */
    function submitForm() {
        const data = {
            table: tableFormData.value,
            columns: columnData.value,
            editConfig: editFormData.value,
            editRile: editRulesInfo.value.getRoleData(),
            form: formConfigData.value,
            formItem: formInfo.value.getFormItemData(),
            pager: pageFormData.value,
            proxy: proxyFormData.value,
            toolbar: toolbarData.value,
        };
        console.log("提交数据", data);
        saveTableConfig(data).then((res: any) => {
            proxy.$modal.msgSuccess(res.msg);
        });
    }

    function close() {
        const obj = {
            path: "/system/menu/menu-table/index/" + menuId.value,
            query: { t: Date.now() },
        };
        proxy.$tab.closeOpenPage(obj);
    }
</script>
